<template>
  <div>
    <el-card shadow="never" :body-style="{padding:'10px'}" style="width:100%;margin-right: 1%">
      <div slot="header">
        <span>{{ $t('团队今日质量排行榜') }}</span>
      </div>
      <Table :page="false" border :table-data="toDayQualityTableData" max-height="600px">
        <el-table-column :label="$t('排名')" align="center" prop="rank"></el-table-column>
        <el-table-column :label="$t('员工姓名')" align="center" prop="adminUserName"></el-table-column>
        <el-table-column :label="$t('入催数')" align="center" prop="totalOrderNum"></el-table-column>
        <el-table-column :label="$t('结清数')" align="center" prop="settleOrderNum"></el-table-column>
        <el-table-column :label="$t('展期数')" align="center" prop="rollOrderNum"></el-table-column>
        <el-table-column :label="$t('还款实还率')" align="center" prop="actualRate">
        </el-table-column>
        <el-table-column :label="$t('综合率')" align="center" prop="comprehensiveRate"> </el-table-column>
        <el-table-column :label="$t('当日复借率')" align="center" prop="reSettleRate"> </el-table-column>
        <el-table-column
            :label="$t('环比上一天效率')"
            align="center" prop="contrastComprehensiveRate">
          <template slot-scope="{row}">
                <span v-if="row.contrastComprehensiveRate || row.contrastComprehensiveRate === 0">
                  <i v-show="row.contrastComprehensiveRate !== 0"
                     :class="row.contrastComprehensiveRate > 0 ? 'el-icon-top' : 'el-icon-bottom'"
                     :style="{color:row.contrastComprehensiveRate > 0 ? '#0EC270' : '#FE6B6B'}"></i>
                   {{ row.contrastComprehensiveRate }}%
                </span>
            <span v-else> - </span>
          </template>
        </el-table-column>
      </Table>
    </el-card>

    <div style="display:flex;margin-top: 15px">
      <el-card shadow="never" :body-style="{padding:'10px'}" style="width:64%;margin-right: 1%">
        <div slot="header">
          <span>{{ $t('团队上周质量排行榜') }}</span>
        </div>
        <Table :page="false" border :table-data="lastWeekQualityTableData" max-height="600px">
          <el-table-column :label="$t('排名')" align="center" prop="rank"></el-table-column>
          <el-table-column :label="$t('员工姓名')" align="center" prop="adminUserName"></el-table-column>
          <el-table-column :label="$t('还款实还款')" align="center" prop="actualRate"></el-table-column>
          <el-table-column :label="$t('综合率')" align="center" prop="comprehensiveRate"></el-table-column>
          <el-table-column :label="$t('当日复借率')" align="center" prop="reSettleRate">

          </el-table-column>
        </Table>
      </el-card>
      <div style="width:35%">
        <el-card shadow="never" :body-style="{padding:'10px'}" style="width:100%;">
          <div slot="header">
            <span>{{ $t('团队整体排名') }}</span>
          </div>
          <el-tabs v-model="rankActive" @tab-click="getRanking">
            <el-tab-pane :label="$t('综合率')" name="1"></el-tab-pane>
            <el-tab-pane :label="$t('当日复借率')" name="2"></el-tab-pane>
            <Table :page="false" border :table-data="rankTableData" max-height="600px">
              <el-table-column :label="$t('类别')" align="center" prop="typeName"></el-table-column>
              <el-table-column :label="$t('公司排名')" align="center" prop="company"></el-table-column>
            </Table>
          </el-tabs>
        </el-card>
        <el-card shadow="never" :body-style="{padding:'10px'}" style="width:100%;margin-top: 10px">
          <div slot="header">
            <span>{{ $t('上周整体数据') }}</span>
          </div>
          <div style="display: flex;justify-content: space-around;">
            <div style="text-align: center">
              <el-progress type="circle" :percentage="comprehensiveRate"></el-progress>
              <p>{{ $t('整体综合率') }}</p>
            </div>
            <div style="text-align: center">
              <el-progress type="circle" :percentage="reSettleRate"></el-progress>
              <p>{{ $t('整体当日复借率') }}</p>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <div style="margin-top: 15px;">
      <el-card shadow="never" :body-style="{padding:'15px'}" style="width:100%">
        <div slot="header">
          <span>{{ $t('曲线图') }}</span>
        </div>
        <div style="display:flex;justify-content: space-between">
          <el-tabs v-model="chartsActive" @tab-click="getCharts">
            <el-tab-pane :label="$t('整体综合率')" name="0"></el-tab-pane>
            <el-tab-pane :label="$t('整体当日复借率')" name="1"></el-tab-pane>
          </el-tabs>
          <div style="text-align: right">
            <el-radio-group v-model="chartsType" @change="getCharts" size="mini">
              <el-radio-button :label="0">{{ $t('近7天') }}</el-radio-button>
              <el-radio-button :label="1">{{ $t('近30天') }}</el-radio-button>
              <el-radio-button :label="2">{{ $t('近1年') }}</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <ve-line height="400px" :data="chartsData" :extend="chartsExtend"
                 :settings="amountSettings"
                 ref="charts"></ve-line>
      </el-card>
    </div>
  </div>
</template>

<script>
import VeLine from 'v-charts/lib/line.common'
import {
  fetchHomeTeamToDayQuality,
  fetchHomeTeamLastWeekQuality,
  lastWeekComprehensive,
  fetchHomeChartsData,
  fetchHomeTeamWholeRank
} from '@/api/postLoan'

export default {
  name: "TeamData",
  components: {
    VeLine
  },
  props: {
    productName: {},
    guestGroupId: {}
  },
  data() {
    return {
      toDayQualityTableData: [],
      rankTableColumn: [
        {label: this.$t('类别'), prop: 'typeName', align: 'center'},
        {label: this.$t('公司排名'), prop: 'companyRanking', align: 'center'},
      ],
      rankTableData: [],
      lastWeekQualityTableData: [],
      qualityData: [],
      chartsType: 0,
      effectActive: '1',
      overViewData: {},
      qualityActive: '1',
      rankActive: '1',
      chartsExtend: {
        color: ['#F1B901'],
        series: {
          smooth: false
        },
        grid: {
          right: 30
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              color: '#eeeeee'
            }
          },
          axisLabel: {}
        },
        tooltip: {
          formatter: (params) => {
            let res = '<div style="margin-bottom: 5px">' + params[0].axisValue + '</br>'
            for (let i = 0; i < params.length; i++) {
              res += params[i].marker + params[i].seriesName + ': ' + params[i].value[1] + '%' + '</br>'
            }
            return res + '</div>'
          }
        }
      },
      amountSettings: {
        yAxisName: [this.$t('单位') + '%'],
        labelMap: {
          dateStr: this.$t('日期'),
          rate: this.chartsTitle,
        },
      },
      chartsData: {
        columns: ['dateStr', 'rate',],
        rows: []
      },
      comprehensiveRate: 0,
      reSettleRate: 0,
      chartsActive: '0',
      chartsTitle: ''
    }
  },
  watch: {
    productName() {
      this.getData()
    },
    guestGroupId: {
      handler(value) {
        if (value) {
          this.getData()
        }
      },
      immediate: true
    },
  },
  methods: {
    getData() {
      this.getTodayQuality()
      this.getLastWeekQuality()
      this.getRanking()
      this.getCharts()
      this.getLastWeekData()
    },
    // 获取团队工作效率
    async getTodayQuality() {
      const res = await fetchHomeTeamToDayQuality({
        productName: this.productName || null,
        guestGroupId: this.guestGroupId
      })
      if (res.code === 1) {
        this.toDayQualityTableData = res.data
      }
    },
    // 获取团队上周工作质量排行榜
    async getLastWeekQuality() {
      const res = await fetchHomeTeamLastWeekQuality({
        productName: this.productName || null,
        guestGroupId: this.guestGroupId,
      })
      if (res.code === 1) {
        this.lastWeekQualityTableData = res.data
      }
    },
    // 获取团队整体排名
    async getRanking() {
      const res = await fetchHomeTeamWholeRank({productName: this.productName || null, guestGroupId: this.guestGroupId,})
      if (res.code === 1) {
        // 获取综合率
        const comprehensiveRate = [
          {
            typeName: this.$t('上周综合率'),
            company: res.data.lastWeekComprehensiveRank,
          },
          {
            typeName: this.$t('本周综合率'),
            company: res.data.thisWeekComprehensiveRank,
          },
        ]
        // 获取复借率
        const reSettleRate = [
          {
            typeName: this.$t('上周当日复借率'),
            company: res.data.lastWeekReSettleRank,
          },
          {
            typeName: this.$t('本周当日复借率'),
            company: res.data.thisWeekReSettleRank,
          },
        ]
        const data = this.rankActive === '1' ? comprehensiveRate : reSettleRate
        this.rankTableData = data
      }
    },
    // 获取团队曲线图
    async getCharts() {
      const res = await fetchHomeChartsData({
        productName: this.productName || null,
        authType: 1,
        dataType: parseInt(this.chartsActive),
        guestGroupId: this.guestGroupId,
        dateType: this.chartsType
      })
      if (res.code === 1) {
        this.chartsData.rows = res.data
        this.$set(this.amountSettings.labelMap, 'rate', this.chartsActive === '0' ? this.$t('整体综合率') : this.$t('整体当日复借率'))
        this.$refs.charts.resize()
      }
    },
    // 获取团队上周整体数据
    async getLastWeekData() {
      const res = await lastWeekComprehensive({productName: this.productName || null, guestGroupId: this.guestGroupId,})
      if (res.code === 1) {
        const {comprehensiveRate, reSettleRate} = res.data
        this.comprehensiveRate = parseFloat(comprehensiveRate)
        this.reSettleRate = parseInt(reSettleRate)
      }
    },
  }
}
</script>

<style scoped lang="less">
.col {
  width: 16.6%;
  padding: 0 10px;
}

.page_col {
  background-size: 100% 100%;
  height: 120px;
  color: #fff;
  box-sizing: border-box;
  padding: 25px 0;

  .img {
    height: 49px;
    width: 49px;
  }
}

</style>
